<template>
  <div class="comment_input">
    <el-form :model="commentForm"
             ref="commentForm"
             label-width="0"
             class="commentForm">
      <el-form-item>
        <el-input
          type="textarea"
          placeholder="回复他/她:"
          v-model="commentForm.textarea"
          maxlength="150"
          show-word-limit
          :rows="6">
        </el-input>
      </el-form-item>
      <div class="publish">
        <el-form-item>
          <el-button type="primary" @click="submitForm('commentForm')">回复</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
  import {comment} from "network/detail";
  export default {
    name: "Comment",
    data() {
      return {
        commentForm: {
          textarea: ''
        },
        isLogin: this.$store.state.userInfo.isLogin
      }
    },
    props: {
      articleId: {
        type: String,
        request: true,
      },
      title: {
        type: String,
        request: true,
      },
    },
    computed: {

    },
    methods: {
      submitForm(formName) {
        if (!this.isLogin) {
          this.$toast.show('请完成登录，再回复文章', 'failure', 1000);
          return;
        }
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const obj = {
              type: "main",
              article: {
                id: this.articleId,
                title: this.title
              },
              content: this.commentForm.textarea,
              userId: this.$store.state.userInfo.id,
              userInfo: {
                avatar: this.$store.state.userInfo.avatar,
                nickname: this.$store.state.userInfo.nickname
              }
            }
            comment(obj).then(res => {
              if(res.data.code) {
                this.$toast.show('回复成功', 'success', 1000)
                this.$bus.$emit('refresh')
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    }
  }
</script>

<style scoped>
  .commentForm {
    position: relative;
  }

  .commentForm >>> .el-textarea__inner {
    padding: 10px;
  }

  .publish {
    position: absolute;
    bottom: 15px;
    right: 15px;
  }

  .commentForm >>> .publish .el-form-item {
    margin-bottom: 0;
  }

  .commentForm >>> .el-textarea .el-input__count {
    width: 40px;
    height: 20px;
    bottom: 5px;
    right: 15px;
    left: 10px;
    line-height: 20px;
  }

  .el-button--primary {
    background-color: #4361a7;
    border-color: #4361a7;
    color: #fff;
  }

  .el-button--primary:hover {
    background-color: #5177ce;
    border-color: #5177ce;
    color: #fff;
  }
</style>
